<!--
 * @Author: 杨湲 yy7072@qq.com
 * @Date: 2025-09-11 16:31:17
 * @LastEditors: 杨湲 yy7072@qq.com
 * @LastEditTime: 2025-10-07 10:34:46
 * @FilePath: \city\src\pages\components(1)\Bottom2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="bottom2" style="height: 150px;"></div>

    </div>
</template>
<script>
import { get } from '@/utils/request';// 引入HTTP请求工具（用于调用后端接口）
import { Line } from '@antv/g2plot'; // 引入G2Plot的折线图组件
import moment from 'moment';// 引入时间格式化工具（处理时间戳）
export default {
    data() {
        return {
            title: '监测点信息',
            pmData: [],// 存储处理后的PM2.5数据（用于图表渲染）
            params:{ // 接口请求参数
                page:1,// 页码
                pageSize:100// 每页条数（一次获取100条数据）
            }
        }
    },
    methods: {
        loadLine() {
            const line = new Line(this.$refs.bottom2, {// 绑定图表容器（通过ref获取）
                data:this.pmData,// 数据源（处理后的pmData）
                padding: 'auto',// 自动计算图表内边距
                xField: 'insert_time',// X轴字段（时间，对应处理后的"HH:mm:ss"）
                yField: 'pm25', // Y轴字段（PM2.5数值）
                reflect: 'y',// Y轴翻转（默认Y轴正方向向上，翻转后向下，根据需求调整）
                xAxis: {
                    // because coordinate is reflectY
                    position: 'top',// X轴显示在顶部（默认在底部，翻转Y轴后通常配合顶部X轴）
                },
                
            });

            line.render();// 渲染图表
        },
        async getPmData() {
             // 调用后端接口，获取今日监测数据
            let res =await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, "11111");
            let pm = [];
            //将后端获取的数据给 临时数组，存储处理后的数据
            res.data.list.forEach((item, index, arr) => {
                //由于刻度混乱 手动修正第一条数据的pm25值
                arr[0].pmData = 15.4;
                //item表示数组每一项
                item.insert_time = moment(item.insert_time).format("HH:mm:ss");
                //每隔十条取一条
                if (index % 10 == 0) {
                    pm.push(arr[index])
                }
            })
            this.pmData = pm;
        }

    },
    async mounted() {
        await this.getPmData(); // 等待数据获取并处理完成
        this.loadLine()// 数据准备好后，渲染图表
    }

}
</script>
<style lang="less" scoped></style>
